<script lang="ts" setup>
useHead({
    bodyAttrs: {
        class: "page-template-page-board page"
    }
})
const siteTitle = '众言'
</script>

<template>
    <Nav :title="siteTitle"/>
    <div class="bg-box">
        <video class="video-light" id="native" src="@/assets/board/board-Black-Hole.mp4" loop="" autoplay="autoplay"
               preload="" muted="" poster="" x5-playsinline="" playsinline="" webkit-playsinline="true"
               oncontextmenu="return false" controlslist="nodownload"></video>
    </div>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" rel="main">
            <slot name="main"/>
            <slot name="other"/>
        </main>
    </div>
    <Footer/>
</template>
<style scoped>
body.page-template-page-board {
    --h-bg: #000;
}

body.page .content-area {
    position: relative;
    margin: clamp(250px, 40vmin, 500px) auto 0;
    padding-block: 1rem;
    z-index: 2;
}

body.page .site-main {
    width: min(1000px, 100%);
    margin: 0 auto;
}

video#native {
    -webkit-mask: linear-gradient(90deg, #000 90%, #0000);
    height: 100%;
}

.bg-box {
    width: 100%;
    height: clamp(500px, 80vmin, 1000px);
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(@/assets/board/bg.webp) no-repeat center / cover;
    animation: opacity 1s backwards;
    transition: 1s;
    z-index: 1;
}

.bg-box {
    background-size: min(2000px, 200%);
}

@media (min-width: 1153px) {
    body.page .content-area {
        width: 70%;
        margin: var(--edge-tb) 0 0 auto;
    }

    .bg-box {
        width: 50%;
        height: 100%;
    }

    video#native {
        -webkit-mask: linear-gradient(90deg, #000 90%, #0000);
    }
}
</style>
